<template>
  <div class="content-item content-top">
    <div class="row">
      <div class="data-stat cost">
        <div class="flex-between">
          <span class="title">设备在场</span>
        </div>
        <div class="chart">
          <DeviceCostChart ref="DeviceCostChartRef"></DeviceCostChart>
        </div>
      </div>

      <div class="data-stat km">
        <div class="flex-between">
          <span class="title">设备退场</span>
        </div>
        <div class="chart">
          <DeviceKmChart ref="DeviceKmChartRef"></DeviceKmChart>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="data-stat oil-wear">
        <div class="flex-between">
          <span class="title">设备检定情况</span>
        </div>
        <div class="chart">
          <DeviceOilWearChart ref="DeviceOilWearChartRef"></DeviceOilWearChart>
        </div>
      </div>

      <div class="data-stat run">
        <div class="flex-between">
          <span class="title">设备在线</span>
        </div>
        <div class="chart">
          <DeviceRunChart ref="DeviceRunChartRef"></DeviceRunChart>
        </div>
      </div>

      <div class="data-stat off-line">
        <div class="flex-between">
          <span class="title">设备离线</span>
        </div>
        <div class="chart">
          <DeviceOffLineChart ref="DeviceOffLineChartRef"></DeviceOffLineChart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import DeviceCostChart from './module/DeviceCostChart';
import DeviceKmChart from './module/DeviceKmChart';
import DeviceOilWearChart from './module/DeviceOilWearChart';
import DeviceRunChart from './module/DeviceRunChart';
import DeviceOffLineChart from './module/DeviceOffLineChart';
import httpInterface from "../../../util/httpInterface";

export default {
  components: {
    DeviceCostChart, DeviceKmChart, DeviceOilWearChart, DeviceRunChart, DeviceOffLineChart
  },
  data() {
    return {
      deviceIn: [],  // 在场
      deviceOf: [],  // 退场
      verification: [],  // 检定   verificationIn 已检定  verificationOf 未检定
      onlineStatusList: [],  // 在线设备
      offStatusList: [],  // 离线设备
    };
  },

  methods: {
    getDeviceChartData() {
      let _this = this;
      httpInterface.requestGet(this, httpInterface.URL_DEVICETYPE_DIS_PLAY, null, function (res) {
        let { other, success } = res.data;
        if (success) {
          _this.$refs.DeviceCostChartRef.getDeviceInData(other.deviceIn);
          _this.$refs.DeviceKmChartRef.getDeviceOfData(other.deviceOf);
          _this.$refs.DeviceOilWearChartRef.getVerificationData(other.verification);
          _this.$refs.DeviceOffLineChartRef.getOffStatusListData(other.offStatusList);
          _this.$refs.DeviceRunChartRef.getOnlineStatusList(other.onlineStatusList);
        }
      }, function (err) {
        _this.errorMessage("获取失败！");
      })
    }
  }
};
</script>

<style scoped lang="scss">
*{
  box-sizing: border-box;
}

.content-top{
  height: calc(100vh - 60px);
}

.row {
  display: flex;
  height: 48%;

  &:first-child {
    margin-bottom: 20px;
  }

  .data-stat {
    flex: 1;
    margin-right: 20px;
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.08);

    &:last-child {
      margin-right: 0;
    }

    .chart {
      width: calc(100% - 40px);
      height: calc(100% - 80px);
      margin: 6px 20px;
      padding: 10px;
      border: 1px solid #eee;
    }

    .flex-between {
      align-items: center;
      padding: 20px 20px 12px 20px;

      .title {
        font-size: 16px;
      }
    }
  }
}
</style>
